<template>
  <div class="box-card">
    <div class="filter">
      <h4 class="title sle">职工列表</h4>
      <el-input v-model="filterText" placeholder="输入关键字进行过滤" clearable></el-input>
      <el-scrollbar class="scro">
        <el-tree :data="data" :props="defaultProps" node-key="id" ref="treeRef" show-checkbox :default-expand-all="true"
          :default-checked-keys="[]" @check-change="getChange" :filter-node-method="filterNode">
        </el-tree>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";

let filterText = ref("");

const treeRef = ref()

const defaultProps = {
  children: "children",
  label: "label",
};

const data = [
  {
    id: 1,
    label: "华东分布",
    children: [
      {
        id: 1,
        label: "市场部",
      },
      {
        id: 2,
        label: "研发部",
      },
      {
        id: 3,
        label: "商务部",
      },
      {
        id: 4,
        label: "财务部",
      },
    ],
  },
  {
    id: 2,
    label: "华南分布",
    children: [
      {
        id: 1,
        label: "市场部",
      },
      {
        id: 2,
        label: "研发部",
      },
      {
        id: 3,
        label: "商务部",
      },
      {
        id: 4,
        label: "财务部",
      },
    ],
  },
  {
    id: 3,
    label: "华西分布",
    children: [
      {
        id: 1,
        label: "市场部",
      },
      {
        id: 2,
        label: "研发部",
      },
      {
        id: 3,
        label: "商务部",
      },
      {
        id: 4,
        label: "财务部",
      },
    ],
  },
  {
    id: 3,
    label: "华西分布",
    children: [
      {
        id: 1,
        label: "市场部",
      },
      {
        id: 2,
        label: "研发部",
      },
      {
        id: 3,
        label: "商务部",
      },
      {
        id: 4,
        label: "财务部",
      },
    ],
  },
  {
    id: 3,
    label: "华西分布",
    children: [
      {
        id: 1,
        label: "市场部",
      },
      {
        id: 2,
        label: "研发部",
      },
      {
        id: 3,
        label: "商务部",
      },
      {
        id: 4,
        label: "财务部",
      },
    ],
  },
  {
    id: 3,
    label: "华西分布",
    children: [
      {
        id: 1,
        label: "市场部",
      },
      {
        id: 2,
        label: "研发部",
      },
      {
        id: 3,
        label: "商务部",
      },
      {
        id: 4,
        label: "财务部",
      },
    ],
  },
  {
    id: 3,
    label: "华西分布",
    children: [
      {
        id: 1,
        label: "市场部",
      },
      {
        id: 2,
        label: "研发部",
      },
      {
        id: 3,
        label: "商务部",
      },
      {
        id: 4,
        label: "财务部",
      },
    ],
  },
  {
    id: 3,
    label: "华西分布",
    children: [
      {
        id: 1,
        label: "市场部",
      },
      {
        id: 2,
        label: "研发部",
      },
      {
        id: 3,
        label: "商务部",
      },
      {
        id: 4,
        label: "财务部",
      },
    ],
  },


];

// 过滤树
watch(() => filterText.value, (val) => {
  treeRef.value.filter(val)
})


const filterNode = (value, data) => {
  if (!value) return true
  return data.label.includes(value)
}



let getChange = (e) => {
  console.log(e);
};
</script>

<style lang="scss" scoped>
.box-card {
  width: 220px;
  height: calc(100vh - 142px);
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px;
  // min-width: 220px;
  overflow: hidden;

  .filter {
    .title {
      margin: 0 0 15px;
      font-size: 18px;
      font-weight: bold;
      color: var(--el-color-info-dark-2);
      letter-spacing: 0.5px;
    }

    .el-input {
      margin: 0 0 15px;
    }

    .scro {
        @media screen and (min-width: 1279px) {
          height: 355px;
        }
        @media screen and (min-width: 1422px) {
          height: 428px;
        }
        @media screen and (min-width: 1599px) {
          height: 510px;
        }
        @media screen and (min-width: 1705px) {
          height: 562px;
        }
        @media screen and (min-width: 1919px) {
          height: 655px;
        }
        @media screen and (min-width: 2559px) {
          height: 915px;
        }
    }
  }
}
</style>